<template>
  <view class="layout">
    <!-- 导航栏 -->
    <view class="navbar">
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <!-- 标题栏 -->
      <view
        class="titleBar"
        :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
      >
        <!-- 返回按钮 -->
        <view class="back-btn" @click="handleBack" v-if="showBackButton">
          <uni-icons class="icon" type="left" color="#888" size="20"></uni-icons>
        </view>
        <!-- 标题 -->
        <view class="title">{{ title }}</view>
      </view>
    </view>

    <!-- 填充区域，用于防止内容被导航栏遮挡 -->
    <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"></view>
  </view>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { onMounted } from 'vue'
import {
  getStatusBarHeight,
  getTitleBarHeight,
  getNavBarHeight,
  getLeftIconLeft,
} from '@/utils/system.js'

// 定义属性
defineProps({
  title: {
    type: String,
    default: '壁纸',
  },
  showBackButton: {
    type: Boolean,
    default: true, // 默认显示返回按钮
  },
})

// 返回按钮的点击处理函数
const handleBack = () => {
  uni.navigateBack({
    delta: 1,
    fail() {
      // 如果 navigateBack 失败，则尝试切换到首页
      uni.reLaunch({
        url: '/pages/index/index',
      })
    },
  })
}
</script>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: linear-gradient(to bottom, transparent, #fff 400rpx),
      linear-gradient(to right, #beecd8 20%, #f4e2d8);
    .statusBar {
    }
    .titleBar {
      display: flex;
      align-items: center;
      padding: 0 30rpx;

      .back-btn {
        margin-right: auto; // 推动标题居中
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50rpx;
        height: 100%;
      }

      .title {
        font-size: 22px;
        font-weight: 700;
        color: $text-font-color-1;
        flex-grow: 1; // 让标题占据剩余空间
        text-align: center; // 居中对齐标题
      }
    }
  }

  .fill {
  }
}
</style>
